<template>
  <div>
    <Header ></Header>
    <Swiper :swiperList='swiperList'></Swiper>
    <Icons :iconList="iconList"></Icons>
    <Recommend :recommendList="recommendList"></Recommend>
    <Weekend :weekendList="weekendList"></Weekend>
    HOME
  </div>
</template>

<script>
import Header from '@/components/index/Header.vue'
// import Swiper from '@/components/index/Swiper.vue'
import Icons from '@/components/index/Icons.vue'
import Recommend from '@/components/index/Recommend.vue'
import Weekend from '@/components/index/Weekend.vue'
import {mapState} from 'vuex'
  export default {
    data() {
      return {
        swiperList:[],
        iconList:[],
        recommendList:[],
        weekendList:[],
        lastCity:''
      }
    },
    methods: {
      getHomeInfo(){
        this.$http.get('index.json?city='+this.city)
        .then(res=>{
          res=res.data
          if(res.ret && res.data){
            this.swiperList=res.data.swiperList
            this.iconList=res.data.iconList
            this.recommendList=res.data.recommendList
            this.weekendList=res.data.weekendList
          }
        })
        .catch(err=>{
          console.log(err)
        })
      },
    },
    computed: {
      ...mapState(['city'])
    },
    mounted() {
      this.lastCity=this.city
      this.getHomeInfo()
    },
    activated() {// 使用keep-alive组件才有，当页面重新被显示时执行
      // 在mounted中获取一次city，在此对比两个city是否一致，从而达到在选择城市时回到首页页面根据city不同而请求数据不同
      if(this.lastCity !== this.city){
        this.lastCity=this.city
        this.getHomeInfo()
      }
    },
    components:{
      Header,
      Swiper:()=>import('@/components/index/Swiper.vue'),
      Icons,
      Recommend,
      Weekend
    }
  }
  
</script>

<style lang="less" scoped>

</style>